<!--
 * @Author: your name
 * @Date: 2021-03-05 10:07:37
 * @LastEditTime: 2021-03-17 14:37:42
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \qdBillingSystem\src\pages\logisticsSystem\warehouseManagement\wareUpdateList\wareApplyFor.vue
-->
<template>
  <div class="container">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item
        ><span style="color: #417ced">仓库管理</span></el-breadcrumb-item
      >
      <el-breadcrumb-item>调拨申请列表</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="tab" style="padding-bottom: 0">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="待提交" name="0"> </el-tab-pane>
        <el-tab-pane label="待审核" name="1"> </el-tab-pane>
        <el-tab-pane label="已驳回" name="2"> </el-tab-pane>
        <el-tab-pane label="已完成" name="3"> </el-tab-pane>
      </el-tabs>
    </div>
    <el-collapse-transition>
      <div class="query" v-show="isShowForm">
        <div class="header">
          <span style="color: #333333">数据查询</span>
          <p
            @click="isShowForm = false"
            style="font-size: 14px; color: #409eff; cursor: pointer"
          >
            收起
          </p>
        </div>
        <!-- code:"",
            createBy:"",
            ware:"",
            date:[],
            good:"",
            dept:"",
            brand:"" -->
        <el-form v-if="activeName == 0" :model="form0" label-width="70px">
          <el-form-item label="申请编号">
            <el-input
              v-model="form0.code"
              placeholder="请输入申请编号"
            ></el-input>
          </el-form-item>
          <el-form-item label="制单人">
            <el-select
              size="small"
              clearable
              v-model="form0.createBy"
              placeholder="请选择制单人"
              filterable
            >
              <el-option
                v-for="item in createdBy"
                :key="item.label"
                :label="item.value"
                :value="item.label"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="采购仓库">
            <el-select
              filterable
              size="small"
              clearable
              v-model="form0.ware"
              placeholder="请选择采购仓库"
            >
              <el-option
                v-for="item in wareList.list"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="制单时间">
            <el-date-picker
              clearable
              v-model="form0.date"
              type="daterange"
              size="small"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              :picker-options="pickerOptions"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="申请商品">
            <el-input :maxlength="50" v-model="form0.good" placeholder="请输入商品名称"> </el-input>
          </el-form-item>
          <el-form-item label="申请部门">
            <div class="selectTree">
              <treeselect
                :options="options"
                v-model="form0.dept"
                search-nested
                :normalizer="normalizer"
                noResultsText="未找到"
                placeholder="请选择"
              >
              </treeselect>
            </div>
          </el-form-item>
          <el-form-item label="申请品牌">
                  <el-select
                    v-model="form0.brand"
                    placeholder="请选择产品品牌"
                    clearable
                  >
                    <el-option
                      v-for="items in brandselect"
                      :key="items.id"
                      :label="items.name"
                      :value="items.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item>
            <el-button
              size="mini"
              type="primary"
              @click="searchEvent()"
              v-on:keyup.enter="searchEvent()"
              >搜索</el-button
            >
            <el-button size="mini" @click="resetEvent()">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-collapse-transition>
    <div class="btns">
      <el-button
        style="opacity: 0"
        disabled
        v-show="!isShowForm"
        type="primary"
        size="mini"
        ><span style="display: flex; align-items: center">
          <img
            style="width: 14px; height: 14px; margin-right: 5px"
            src="../../../../assets/icon/icon_daochu.png"
          />导出
        </span></el-button
      >
      <el-button
        @click="exports"
        v-if="activeName == 3"
        type="primary"
        size="mini"
        ><span style="display: flex; align-items: center">
          <img
            style="width: 14px; height: 14px; margin-right: 5px"
            src="../../../../assets/icon/icon_daochu.png"
          />导出
        </span></el-button
      >
      <el-button v-show="activeName == 3" size="mini" type="primary"
        ><span style="display: flex; align-items: center">
          <img
            style="width: 14px; height: 14px; margin-right: 5px"
            src="../../../../assets/icon/dayin.png"
          />打印
        </span></el-button
      >
      <el-button
        type="primary"
        size="mini"
        @click="isShowForm = true"
        v-show="!isShowForm"
        style="position: absolute; right: 10px"
        >搜索展开</el-button
      >
    </div>
  </div>
</template>
<script>
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  components: { Treeselect },
  data() {
    return {
      activeName: 0,
      isShowForm: true,
      supplierBy: [],
      options: [],
      createdBy: [],
      wareList: {},
      form0: {
        code: "",
        createBy: "",
        ware: "",
        date: [],
        good: "",
        dept: null,
        brand: "",
      },
      brandselect:[],
      normalizer(node) {
        return {
          id: node.orgCode,
          label: node.orgName,
          children: node.children,
        };
      },
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  created() {
    this.createdPer();
    this.getWareList();
    this.department();
    this.brandSelectBox();
  },
  activated() {},
  methods: {
    //** 品牌下拉 **//
    brandSelectBox() {
      this.axios
        .get("/order/comm/commodity/selectList", {
          headers: {
            isLoading: false,
          },
        })
        .then((res) => {
          if (res.code == 0) {
            this.brandselect = res.data;
          } else {
            this.$message.error(res.message);
          }
        });
    },
    handleClick(e) {
      this.activeName = e.name;
    },
    searchEvent() {},
    resetEvent() {},
    // 制单人 && 供应商
    createdPer() {
      this.axios
        .get("/order/v1/purchase/order/purchaseOrderCreatedByList", {
          isLoading: false,
        })
        .then((res) => {
          if (res.code == 0) {
            this.createdBy = res.data;
          } else {
            this.$message.error(res.message);
          }
        });

      // 供应商
      this.axios
        .post(
          "/order/v1/purchase/supplier/purchaseSupplierList",
          {
            createdBy: "",
            endTime: "",
            keyword: "",
            pageNo: 1,
            pageSize: 100000,
            prodBrandId: "",
            prodName: "",
            prodType: "",
            startTime: "",
            supplierAddress: "",
            supplierName: "",
            supplierStatus: 2,
          },
          {
            isLoading: false,
          }
        )
        .then((res) => {
          if (res.code == 0) {
            this.supplierBy = res.data;
          } else {
            this.$message.error(res.message);
          }
        });
    },
    getWareList() {
      this.axios
        .post("order/comm/commWarehouse/list",{
        pageSize:999,
        pageNo:1
      }, {
          isLoading: false,
        })
        .then((res) => {
          //仓库数据接口
          this.wareList = res.data;
          this.wareList.list = this.wareList.list.reverse();
        });
    },
    // 部门选择列表
    department() {
      this.axios
        .post(
          "/sys/v1/org/tree/select",
          {
            request: {
              orgName: "",
              orgType: "",
            },
            version: "",
          },
          {
            headers: {
              isLoading: false,
            },
          }
        )
        .then((res) => {
          if (res.code == 0) {
            this.options = res.data;
          } else {
            this.$message.error(res.message);
          }
        });
    },
  },
};
</script>
<style lang="scss" scoped>
/deep/.el-form-item--mini.el-form-item,
.el-form-item--small.el-form-item {
  margin-bottom: 0px;
}

/deep/.el-form-item {
  margin-bottom: 0px;
}
/deep/.el-tabs__header {
  margin: 0;
}
/deep/.el-input__inner {
  // width: 250px;
  height: 28px;
  line-height: 28px;
}
/deep/.el-table td,
.el-table th.is-leaf {
  text-align: center;
}
/deep/.el-table .cell {
  text-align: center;
}
/deep/.el-form {
  display: flex;
  flex-wrap: wrap;
  /deep/.el-input__inner {
    width: 250px;
    clear: both;
  }
  /deep/ .el-form-item label:after {
    display: inline-block;
    width: 100%;
  }
  /deep/ .el-form-item__label {
    text-align: justify;
    height: 50px;
  }
}
/deep/.el-form-item {
  margin-right: 10px;
}
/deep/.el-drawer:focus {
  outline: none;
}
/deep/.el-drawer__body {
  overflow-y: auto;
}
.container {
  .tab {
    margin-top: 20px;
    background: #fff;
    padding: 0px 10px;
    border-radius: 10px 10px 0px 0px;
  }
  .header {
    padding-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    span {
      font-size: 15px;
      color: #000;
    }

    p {
      color: #4168e7;
      font-size: 12px;
    }
  }
  .query {
    background: #fff;
    padding: 10px;
    margin: 10px 0;
    border-radius: 0px 0px 10px 10px;
    /deep/ .el-form-item label:after {
      display: inline-block;
      width: 100%;
    }
    /deep/ .el-form-item__label {
      text-align: justify;
      height: 40px;
    }
    /deep/.el-input__inner {
      width: 250px;
    }
  }
  .btns {
    margin: 10px 0px;
  }
  .tableContext {
    margin-bottom: 40px;
  }
}
.drawerContext {
  .title {
    border-bottom: 1px solid #d9d9d9;
    padding: 10px;
  }
}
.operation {
  span {
    font-size: 15px;
    color: #333;
    display: inline-block;
    padding: 0 5px;
    color: #4168e7;
  }
  span:hover {
    cursor: pointer;
  }
}
/deep/.el-table th > .cell {
  color: #3a3a3a;
}
.page {
  text-align: right;
  width: 100%;
  background: #f5f5f5;
  padding-right: 20px;
  position: fixed;
  bottom: 0px;
  right: 0px;
  z-index: 1000;

  span {
    font-size: 14px;
    color: #666;
    display: inline-block;
    margin-left: 10px;
  }

  .el-pagination {
    display: inline-block;
    vertical-align: middle;
  }
}
.selectTree {
  width: 250px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
}
/deep/.vue-treeselect {
  height: 28px;
}
/deep/.vue-treeselect--searchable .vue-treeselect__input-container {
  height: 28px;
  line-height: 28px;
  width: 100%;
}
/deep/.vue-treeselect__single-value {
  font-size: 14px;
  line-height: 28px;
}
/deep/.vue-treeselect__menu-container {
  font-size: 15px;
}
/deep/.vue-treeselect__multi-value-item {
  height: 20px;
  line-height: 20px;
  padding: 0;
}
/deep/.vue-treeselect__input {
  height: 26px;
  line-height: 26px;
  outline: none;
  border: none;
  padding: 0;
}
/deep/.vue-treeselect__placeholder {
  font-size: 10px;
  line-height: 28px;
}
/deep/.vue-treeselect--has-value .vue-treeselect__multi-value {
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/deep/.vue-treeselect__control {
  height: 28px;
}
</style>